<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{categoryTittle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<div style="float:right;margin-bottom: 24px">
				<el-button type="danger" @click="batchDeleteChildrenCategories">{{$t("message.delete")}}</el-button>
				<el-button type="primary" @click="addChildrenCategory">{{$t("message.add")}}</el-button>
			</div>
			<edu-table
				@page-change="handleCategoryCurrentChange"
				:total="category.total_"
				:pageSize="category.pageSize_"
				:current-page="category.pageNum_"
				:data="childrenCategories"
				@selection-change="chooseChildren"
			>
				<edu-table-column :label="$t('courseSummary.label')">
					<template slot-scope="scope">{{getLabelNameById(scope.row.label)}}</template>
				</edu-table-column>
				<edu-table-column prop="remark" :label="$t('message.remark')"></edu-table-column>
				<edu-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button
							type="text"
							size="mini"
							@click="editChildrenDialog(scope.row)"
						>{{$t("message.edit")}}</el-button>
						<el-button
							type="text"
							size="mini"
							@click="deleteChildCategory(scope.row)"
						>{{$t("message.delete")}}</el-button>
						<el-button
							type="text"
							size="mini"
							@click="showCourseMaintenance(scope.row)"
						>{{$t('course.CourseMaintain')}}</el-button>
					</template>
				</edu-table-column>
			</edu-table>
		</div>
                   
		<!--子分类添加/编辑对话框-->
		<el-dialog
			:title="childrenOprTitle"
			:visible.sync="childrenOprDialog"
			width="40%"
			:close-on-click-modal="false"
			v-drag-dialog
		>
			<el-form
				ref="ChildCategoryForm"
				:model="postChildCategoryForm"
				label-position="right"
				label-width="80px"
				:rules="rules2"
				label-suffix=":"
			>
				<el-row :gutter="24">
					 <el-col :offset="2" :span="20">
						<el-form-item :label="$t('courseSummary.label')" prop="courseCategory">
							<el-select v-model="postChildCategoryForm.courseCategory" style="width: 100%;">
								<el-option
									v-for="item in optionCategories"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				                  
				<el-row :gutter="24">
					  <el-col :offset="2" :span="20">
						<el-form-item :label="$t('message.remark')">
							<el-input
								v-model="postChildCategoryForm.remark"
								maxlength="255"
								:autosize="{ minRows: 3, maxRows: 5}"
								type="textarea"
								 :placeholder="$t('courses.maxTextLength')"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" style="margin-top: 32px;">
					<el-col :span="24">
						<el-form-item class="float-right no-bottom no-right">
							<el-button @click="closeChildCategory">{{$t("message.cancel")}}</el-button>
							<el-button type="primary" @click="saveChildCategory">{{$t("message.confirm")}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</el-card>
</template>
<script>
import {
	getChildCoursesCategories,
	addChildCoursesCategory,
	editChildCoursesCategory,
	getChildCoursesCategoryById,
	deleteChildCoursesCategories
} from "common/src/api/resource/publicCourse";

export default {
	name: "PublicCourseComponent",
	props: {
		categoryTittle: {
			type: String
		},
		optionCategories: {
			type: Array
		}
	},
	data() {
		return {
			id: "",
			heardTitle: "",
			editChildCategoryId: "",
			category: {
				pageNum_: 1,
				pageSize_: 20,
				total_: 0
			},
			childrenCategories: [], //子类别列表
			chooseChildrenCourseCategories: [], //子类别选中列表
			postChildCategoryForm: {
				courseCategory: "",
				remark: ""
			},
			childrenOprDialog: false,
			rules2: {
				courseCategory: [
					{
						required: true,                       
						message: this.$t('courses.courseCateChooseRequire'),
						trigger: "blur"
					}
				]
			}
		};
	},
	created() {
		//this.init();
	},
	computed: {},
	methods: {
		//获取子类别列表
		getChildrenCategories(id) {
			let data = {
				pageSize_: this.category.pageSize_,
				pageNum_: this.category.pageNum_
			};
			if (id) {
				this.id = id;
				// this.heardTitle =
				// 	this.$t("courseSummary.label") + ":" + row.name;
				data.categoryId = id;
			} else {
				data.categoryId = this.id;
			}

			getChildCoursesCategories(data).then(res => {
				if (res.code == 200) {
					this.category.total_ = res.data.total_;
					this.childrenCategories = res.data.list;
				}
			});
		},
		handleCategoryCurrentChange(val) {
			this.category.pageSize_ = val.pageSize;
			this.category.pageNum_ = val.pageNum;
			this.getChildrenCategories();
		},
		getLabelNameById(id) {
			let option = this.optionCategories.find(c => c.value == id);
			return option ? option.label : "";
		},

		//显示添加/编辑子类别窗口，且初始化
		addChildrenCategory() {
			if (this.$refs.ChildCategoryForm) {
				this.postChildCategoryForm.courseCategory = "";
				this.postChildCategoryForm.remark = "";
				this.$refs.ChildCategoryForm.resetFields();
			}
			this.childrenOprDialog = true;
			this.editChildCategoryId = "";            
			this.childrenOprTitle = this.$t('courses.addCategory');
		},

		editChildrenDialog(row) {
			if (this.$refs.ChildCategoryForm) {
				this.postChildCategoryForm.courseCategory = "";
				this.postChildCategoryForm.remark = "";
				this.$refs.ChildCategoryForm.resetFields();
			}
			this.childrenOprDialog = true;            
			this.childrenOprTitle = this.$t('courses.eidtCategory');
			getChildCoursesCategoryById(row.id).then(res => {
				if (res.code == 200) {
					this.postChildCategoryForm.courseCategory = res.data.label;
					this.postChildCategoryForm.remark = res.data.remark;
					this.editChildCategoryId = res.data.id;
				}
			});
		},

		deleteChildCategory(row) {
			// this.$confirm(
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteChildCoursesCategories({ ids: [row.id] }).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.opSuccess")
						});
						this.getChildrenCategories();
					}
				});
			});
		},

		chooseChildren(val) {
			this.chooseChildrenCourseCategories = val;
		},

		//批量删除子类别
		batchDeleteChildrenCategories() {
			if (this.chooseChildrenCourseCategories.length == 0) {
				this.$noSelectAlert();
				// this.$message({
				// 	type: "info",                   
				// 	message: this.$t('courses.plsChooseCategory')
				// });
				return;
			}
			// this.$confirm(
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteChildCoursesCategories({
					ids: this.chooseChildrenCourseCategories.map(c => c.id)
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.opSuccess")
						});
						this.getChildrenCategories();
					}
				});
			});
		},

		//关闭子类别窗口
		closeChildCategory() {
			this.childrenOprDialog = false;
		},

		//保存子类别
		saveChildCategory() {
			this.$refs.ChildCategoryForm.validate(valid => {
				if (!valid) {
					return;
				}
				let fn = null,
					data = null;
				if (this.editChildCategoryId) {
					fn = editChildCoursesCategory;
					data = {
						categoryId: this.id,
						id: this.editChildCategoryId,
						label: this.postChildCategoryForm.courseCategory,
						remark: this.postChildCategoryForm.remark
					};
				} else {
					data = {
						categoryId: this.id,
						label: this.postChildCategoryForm.courseCategory,
						remark: this.postChildCategoryForm.remark
					};
					fn = addChildCoursesCategory;
				}
				fn(data).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.opSuccess")
						});
						this.childrenOprDialog = false;
						this.getChildrenCategories();
					}
				});
			});
		},
		showCourseMaintenance(row) {
			this.$emit("courseMaintenance", row);
			//this.pathKey = 'maintenance';

			// this.resetCoursesForm();
			// this.courseDialog = true;
			// this.coursesForm.categoryId = row.id;
			// this.getCoursesMaintain();
		},

		back() {
			this.$emit("back", "main");
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

